<template>
  <div class="tab_from">
    <el-table stripe
              :data="tableData"
              style="width: 100%;" border
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
              v-loading="loading"
              element-loading-text="Loading..."
              :element-loading-spinner="svg"
              element-loading-svg-view-box="-10, -10, 50, 50"
    >

      <el-table-column label="序号" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.typeId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="类型" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.informType.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="标题" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发送范围" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.range }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发布者" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.tId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发布时间" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.time }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>

    </el-table>
  </div>
  <paging v-if="pagState" @pag="handlePag" @pag-add="handlePagAdd" @pag-reduce="handlePagReduce" @pag-skip="handleSkip" :msg="pageList"/>
</template>

<script setup lang="ts">
import { reactive, defineProps,ref,defineAsyncComponent } from "vue";
import service from "@/api";
const paging = defineAsyncComponent(() => import('@/components/paging.vue'))
const loading = ref(true)

const props = defineProps({
  megState: Number,
});
const megState = ref(props.megState);

// 获取通知列表
interface informList {
  typeId: number // 通知类型Id
  title: string  // 通知
  range: number // 通知范围(0:针对全校通知,其余1~6对应年级通知)
  tId: number // 发布者id
  time: string // 发布时间
  informType: {
    id?: number
    name: string // 活动名称
    attribute?: string
    state: string // 发布状态
  }
}
let tableData: informList[] = reactive([])

let inFormList = ref()
let pages = ref(1) // 当前页
let total = ref(5) // 条数
let pagState = ref(false) // 当获取到数据展示分页

let pageList = ''
const getRes = async (pagDate: { cp: number; ps: number; })=> {
  const res = await service.jiaxiaohutong.jxInteractionList(pagDate)
  inFormList.value = res.data.data.date
  pageList = res.data.data.page
  pagState.value = true // 当有数据展示分页条
  for (let i = 0; i < inFormList.value.length; i++) {
    tableData.push(inFormList.value[i])
  }
  loading.value = false // 加载动画 关闭
}
getRes({cp: pages.value,ps: total.value})


// 删除
const handleDelete = (index: number, row: informList) => {
  console.log(index, row)
}

// 分页条数更改数据
function listMain(upDate:{pages: number,total: number}) {
  loading.value = true
  tableData.length=0
  getRes({cp: upDate.pages-1,ps: upDate.total})

}

// 条数变更
function handlePag(value: {pages: number,total: number}) {
  listMain(value)
}
// 增加
function handlePagAdd(value: {pages: number,total: number}) {
  listMain(value)
}

// 减少
function handlePagReduce(value: {pages: number,total: number}) {
  listMain(value)
}

// 跳转
function handleSkip(value: {pages: number,total: number}) {
  listMain(value)
}
</script>

<style scoped>
@import url('@/style/paging.css');
</style>
